<!--
 * @Description: 
 * @Author: restart
 * @Date: 2024-08-16 16:21:12
 * @LastEditors: restart
 * @LastEditTime: 2025-01-02 09:47:22
-->
<template>
  <div>
    <input type="number" @change="number">
    <select @change="handleChange">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </div>
</template>
  
<script setup lang='ts'>
  import { ref } from 'vue'
  const age = ref(18)
  const handleChange = (value) => {
    console.log(value,value.target.value)
  }
  // vue常见修饰符  .stop .once .prevent .self .sync
  // 在表单的input里面实现将用户输入的内容转化为一个number，输入电话号码通过修饰符实现转化为number的类型
  // .number .trim
  // 2.watch  和 cumputed的区别
  // 页面首次加载如何触发watch监听？   deep：深度监听，immediate
  // vue项目实现首屏项目加载优化  { 1.服务端渲染 2.骨架屏 3.图片懒加载  4.异步组件 }
  // vue的动态组件
  // 根据不同的状态显示不同的组件    <component :is="currentComponent"></component>  component占位符
  // 页面刷新之后 store中的state数据是否存在？    不存在了
  // vue2的v-modal在vue3中是怎样实现的？（自定义组件）
  // ref 和 reactive的区别：
  // 微信小程序如何实现数据的监听？ observes 属性实现监听；
  // 微信小程序 父子组件通信？
  // diff算法    简单diff与双端diff算法的区别
  const number = (value) => {
    console.log(typeof value.target.value)
  }
</script>
  
<style lang='scss' scoped>
  
</style>